<template>
    <div class="echarts">
        <div class="dsa">dasfaf</div>
        <div id="echarts" v-show="isshow"></div>
        <div id="echarts1" v-show="!isshow"></div>
        <el-button @click="btn()">按钮1</el-button>
        <el-button @click="btn()">按钮2</el-button>
    </div>
</template>
<script>
export default {
    name: "storesort",
    data() {
        return {
            isshow: true
        }
    },
    mounted() {
        let _self = this;
        window.addEventListener('resize',_self.echartInit,false)
        _self.echartInit()

    },
    methods: {
        btn() {
            let _self = this;
            _self.isshow = !_self.isshow;
            // _self.echar tInit1();
            // echarts进行频繁的切换时候 会导致图像显示不全
            // 1.将v-if变成v-show 
            // 2.切换时使用$nextTick()

            _self.$nextTick(function () {
                // 必须等DOM全部渲染完毕才会进来
                // 什么情况下用　
                // １．Ｖｕｅ里面使用ｊｑｕｅｒｙ插件
                // ２. echarts
                //  3.需要获得当前DOM真实的宽高时候
                _self.echartInit1();
            })
        },
        echartInit() {
            console.log(1234);
            let _self = this;
            let charDOM = document.getElementById("echarts");
            let myChart = _self.$echarts.init(charDOM);
            // _self.$echarts就是我们Vue原型里面注册的全局变量
            // init方法式echarts初始化
            let option = {
                title: {
                    text: 'Stacked Area Chart'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: ['MonMonMonMonMonMon', 'TueTueTueTueTueTue', 'WedWedWedWedWedWed', 'ThuThuThuThuThuThuThuThu', 'FriFriFriFriFriFriFriFri', 'SatSatSatSatSatSatSatSat', 'SunSunSunSunSunSunSunSun'],
                        // echarts中X轴文字显示不全
                        axisLabel: {
                            rotate: -45,
                            interval: 0
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: 'Email',
                        type: 'line',
                        stack: 'Total',
                        areaStyle: {},
                        emphasis: {
                            focus: 'series'
                        },
                        data: [120, 132, 101, 134, 90, 230, 210]
                    },
                    {
                        name: 'Union Ads',
                        type: 'line',
                        stack: 'Total',
                        areaStyle: {},
                        emphasis: {
                            focus: 'series'
                        },
                        data: [220, 182, 191, 234, 290, 330, 310]
                    },
                    {
                        name: 'Video Ads',
                        type: 'line',
                        stack: 'Total',
                        areaStyle: {},
                        emphasis: {
                            focus: 'series'
                        },
                        data: [150, 232, 201, 154, 190, 330, 410]
                    },
                    {
                        name: 'Direct',
                        type: 'line',
                        stack: 'Total',
                        areaStyle: {},
                        emphasis: {
                            focus: 'series'
                        },
                        data: [320, 332, 301, 334, 390, 330, 320]
                    },
                    {
                        name: 'Search Engine',
                        type: 'line',
                        stack: 'Total',
                        label: {
                            show: true,
                            position: 'top'
                        },
                        areaStyle: {},
                        emphasis: {
                            focus: 'series'
                        },
                        data: [820, 932, 901, 934, 1290, 1330, 1320]
                    }
                ]
            };
            option && myChart.setOption(option);
            window.onresize=function(){
                myChart.resize()
            }
        },
        echartInit1() {
            let _self = this;
            let charDOM = document.getElementById("echarts1");
            let myChart = _self.$echarts.init(charDOM);
            let option = option = {
                title: {
                    text: 'qwe',
                    subtext: '执\n行'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    formatter: function (params) {
                        var tar = params[1];
                        return tar.name + '<br/>' + tar.seriesName + '<br/> : ' + tar.value;
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    splitLine: { show: false },
                    data: ['Total', 'Rent', 'Utilities', 'Transportation', 'Meals', 'Other']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: 'Placeholder',
                        type: 'bar',
                        stack: 'Total',
                        itemStyle: {
                            borderColor: 'transparent',
                            color: 'transparent'
                        },
                        emphasis: {
                            itemStyle: {
                                borderColor: 'transparent',
                                color: 'transparent'
                            }
                        },
                        data: [0, 1700, 1400, 1200, 300, 0]
                    },
                    {
                        name: 'Life Cost',
                        type: 'bar',
                        stack: 'Total',
                        label: {
                            show: true,
                            position: 'inside'
                        },
                        data: [2900, 1200, 300, 200, 900, 300]
                    }
                ]
            }; option && myChart.setOption(option);
            window.onresize=function(){
                myChart.resize()
            }
        }
    },
}
</script>
<style>
#echarts {
    height: 400px;
    /* width: 100%; */
}

#echarts1 {
    height: 400px;
    /* width: 100%; */
}

.dsa {
    font-family: 'newFont'
}
/* .echarts canvas{
    width: 100%
} */
</style>